<template>
	<view class="">
		<u-navbar :is-back="true" title="学员详情" back-icon-color="#ffffff" :background="{backgroundColor:'#E62131'}"
			title-color="#ffffff"></u-navbar>
		<view class="listcents">
			<view class="topsads">
				<view class="toptitle fliexs space_between">
					<span class="names">张三丰 <span class="cardtitle">其他</span></span>
					<span class="topdate colors" @click="topages"><u-icon name="edit-pen-fill" size="28"
							color="#606266"></u-icon> 修改</span>
				</view>
				<view class="list_btns colors">
					<div class="lisntcenter fliexs">
						<u-icon name="phone" size="28" color="#606266"></u-icon> <span
							style="padding-left: 10rpx;">电话</span>
					</div>
					<!-- <div class="lisntcenter fliexs">
						<u-icon name="calendar" size="28"></u-icon> <span style="padding-left: 10rpx;">课程名称</span>
					</div> -->

					<div class="lisntcenter fliexs">
						<u-icon name="account-fill" size="28"></u-icon> <span style="padding-left: 10rpx;">班级</span>
					</div>
				</view>
			</view>
			<view class="" style="height: 4rpx;background-color: #f2f2f2;"></view>
			<view class="">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"
					active-color="#E62131"></u-tabs>
			</view>
			<view class="titles" v-if="current == 0">
				共在读1个课程
			</view>
			<view class="titles" v-if="current == 1">
				<span @click="isckickTime(1)">{{form.sTime}} <u-icon name="arrow-down-fill" size="28"
						style="margin-left: 10rpx;"></u-icon></span> <span style="padding: 0 40rpx;">至</span> <span
					@click="isckickTime(2)">{{form.eTime}} <u-icon name="arrow-down-fill" size="28"
						style="margin-left: 10rpx;"></u-icon></span>
			</view>
			<view class="titles" v-if="current == 1">
				共3次课，已消耗0课时/0.00元
			</view>
		</view>
		<view class="scrsas" v-if="current == 0" :style="'height:'+heightad+'px;'">
			<view class="listkecheng">
				<view class="listtitle">
					全年兴趣班 <span class="minicard bg1">正常</span> <span class="minicard bg2">已付款</span>
				</view>
				<view class="centesr">
					剩余20.00课时
				</view>
				<view class="btnliats">
					<span>购买20.00课时 共2000.00元</span> <span>2023-06-15签单</span>
				</view>

			</view>
		</view>
		<view class="scrsas" v-if="current == 1"  :style="'height:'+heightad+'px;'">
			<view class="lsitreat" v-for="(item,index) in 10" :key="index" @click="listAdtops(item)">
				<view class="toptitle fliexs">
					<span class="bans">班</span>
					<span class="names">2023-6-56 18:30-20:30 <span class="cardtitle">未上课</span> </span>
				</view>
				<view class="list_btns colors">
					<div class="lisntcenter fliexs">
						<u-icon name="calendar" size="28"></u-icon> <span style="padding-left: 10rpx;">性趣班 张三</span>
					</div>
					<div class="lisntcenter fliexs">
						<u-icon name="order" size="28"></u-icon> <span style="padding-left: 10rpx;">1课时 0.00元</span>
					</div>
				</view>
			</view>
		</view>
		<view class="scrsas" v-if="current == 2"  :style="'height:'+heightad+'px;'">
			<view class="datetext">
				<div class="listad"><span class="nameads">学员姓名</span> <span>张三</span></div>
				<div class="listad"><span class="nameads">学员性别</span> <span>-</span></div>
				<div class="listad"><span class="nameads">学员性别</span> <span>男</span></div>
				<div class="listad"><span class="nameads">学员性别</span> <span>男</span></div>
				<div class="listad"><span class="nameads">学员性别</span> <span>男</span></div>
				<div class="listad"><span class="nameads">学员性别</span> <span>男</span></div>
			</view>
		</view>
		<u-picker mode="time" v-model="showdate" :params="dateparams" @confirm="confirmdate"
			confirm-color="#E62131"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '报读课程'
				}, {
					name: '上课记录'
				}, {
					name: '详细资料'
				}],
				current: 0,
				form: {
					sTime: '请选择',
					eTime: '请选择',
				},
				dateindex: 1,
				showdate: false,
				dateparams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				heightad: 0,
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			topages() {
				uni.navigateTo({
					url: "./studentAdd"
				})
			},
			isckickTime(index) {
				this.dateindex = index
				this.showdate = true;
			},
			// 确认时间
			confirmdate(e) {
				if (this.dateindex == 1) {
					this.form.sTime = e.year + '-' + e.month + '-' + e.day
				}
				if (this.dateindex == 2) {
					this.form.eTime = e.year + '-' + e.month + '-' + e.day
				}
			},
		},
		onReady() {
			uni.getSystemInfo({
				success: (e) => {
					// this.compareVersion(e.SDKVersion, '2.5.0')
					let statusBar = 0
					let customBar = 0


					// #ifdef MP
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					if (e.platform === 'android') {
						// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
						customBar = e.statusBarHeight + 50
					}
					// #endif


					// #ifdef MP-WEIXIN
					statusBar = e.statusBarHeight
					// @ts-ignore
					const custom = wx.getMenuButtonBoundingClientRect()
					customBar = custom.bottom + custom.top - e.statusBarHeight
					// #endif


					// #ifdef MP-ALIPAY
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + e.titleBarHeight
					// #endif


					// #ifdef APP-PLUS
					console.log('app-plus', e)
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					// #endif


					// #ifdef H5
					statusBar = 0
					customBar = e.statusBarHeight + 45
					// #endif

					// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
					console.log(statusBar, customBar, e)
					const query = uni.createSelectorQuery().in(this);
					let that = this;
					query
						.select('.listcents')
						.boundingClientRect(data => {
							console.log(e.screenHeight - data.height - customBar)
							that.heightad = e.screenHeight - data.height - customBar - 60; 
						})
						.exec();
					
				}
			})
		},
	}
</script>

<style lang="scss">
	.scrsas{
		overflow-y: scroll;
	}
	.topsads {
		padding: 30rpx;

		.toptitle {
			.names {
				font-weight: bold;

				.cardtitle {
					display: inline-block;
					padding: 2rpx 6rpx;
					background-color: #f2f2f2;
					border-radius: 5rpx;
					margin-left: 10rpx;
					font-size: 20rpx;
					color: #606266;
				}
			}
		}

		.lisntcenter {
			margin-top: 10rpx;
		}
	}

	.titles {
		padding: 30rpx;
	}

	.listkecheng {
		padding: 30rpx;
		padding-top: 0;

		.listtitle {
			font-weight: bold;
			font-size: 26rpx;

			.minicard {
				display: inline-block;
				padding: 1rpx 5rpx;
				border: 1rpx solid #f2f2f2;
				border-radius: 6rpx;
				margin-left: 20rpx;
				font-size: 22rpx;
			}

			.bg1 {
				border-color: #E62131;
				color: #E62131;
			}

			.bg2 {
				border-color: #19be6b;
				color: #19be6b;
			}
		}

		.centesr {
			line-height: 40rpx;
			color: #606266;
		}

		.btnliats {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.lsitreat {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f2f2f2;

		.toptitle {
			.bans {
				display: inline-block;
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 22rpx;
				text-align: center;
				background-color: #E62131;
				color: #ffffff;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}

			.names {
				font-weight: bold;

				.cardtitle {
					display: inline-block;
					padding: 2rpx 6rpx;
					// background-color: #f2f2f2;
					border: 1rpx solid #E62131;
					border-radius: 5rpx;
					margin-left: 10rpx;
					font-size: 20rpx;
					color: #E62131;
				}
			}
		}

		.tiext_center {
			width: 100%;
			margin: 10rpx 0;
			white-space: nowrap; //不换行
			overflow: hidden; //超出部分隐藏
			text-overflow: ellipsis; //文本溢出显示省略号
		}

		.lisntcenter {
			margin-top: 10rpx;
		}
	}
	.datetext{
		padding: 30rpx;
		.listad{
			display: flex;
			align-items: center;
			line-height: 60rpx;
			color: #000000;
			.nameads{
				padding-right: 20rpx;
				color: #606266;
			}
		}
	}
</style>